<template>
	<div style="width:100%;">
		<el-table size="mini" stripe border show-overflow-tooltip="true" :data="data" style="width: 100%" @selection-change="handleSelectionChange" @sort-change="onSortChangeHandler">
			<el-table-column v-if="componentModel.multiSelect===true" type="selection" width="55" />
			<el-table-column  v-for="columnModel in componentModel.children" :key="columnModel.id" :label="columnModel.title" :sortable="true" :prop="columnModel.children[0].id" >
				<template v-slot="scope">
					<TableLabelRenderer v-if="columnModel.children[0].type=='label'" :componentModel="columnModel.children[0]" :tableData="scope.row"></TableLabelRenderer>
					<ImageRenderer v-if="columnModel.children[0].type=='image'" :componentModel="columnModel.children[0]" :tableData="scope.row"></ImageRenderer>
					<SwitchRenderer v-if="columnModel.children[0].type=='switch'" :componentModel="columnModel.children[0]" :tableData="scope.row"></SwitchRenderer>
					<TagRenderer v-if="columnModel.children[0].type=='tag'" :componentModel="columnModel.children[0]" :tableData="scope.row"></TagRenderer>
					<div v-else-if="columnModel.children[0].type=='row'">
						<template v-for="rendererModel in columnModel.children[0].children">
							<IconComponent :key="rendererModel.id" :componentModel="rendererModel"  v-if="rendererModel.type=='icon'" :data="scope.row"></IconComponent>
						</template>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background layout="prev, pager, next" :total="total" :page-size="componentModel.pageSize" v-model:current-page="currentPage" @current-change="currentPageChange" v-show="componentModel.pageable">
		</el-pagination>
	</div>
</template>

<script>
	import IconComponent from '@/components/tablerenderer/IconComponent.vue';
	import TableLabelRenderer from '@/components/tablerenderer/TableLabelRenderer.vue';
	import ImageRenderer from '@/components/tablerenderer/ImageRenderer.vue';
	import SwitchRenderer from '@/components/tablerenderer/SwitchRenderer.vue';
	import TagRenderer from '@/components/tablerenderer/TagRenderer.vue';
	import {
		sendComponentEventRequest
	} from '@/utils/requestUtils.js';
	import utils from '@/utils/utils.js';
	export default {
		name: "TableComponent",
		props: ["componentModel"],
		components: {
			IconComponent,
			TableLabelRenderer,
			ImageRenderer,
			SwitchRenderer,
			TagRenderer
		},
		data() {
			return {
				data: [],
				total: 0,
				pageSize: 10,
				currentPage: 1,
				multipleSelection: [],
				sortField: "",
				sortType: "",
			}
		},
		inject:['children'],
		mounted() {
			this.children.push(this);
			this.pageSize = this.componentModel.pageSize;
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			setProp(prop) {
				var tableData = prop["tableData"];
				var selectItemMap=prop["selectItemMap"];
				if (tableData != undefined) {
					this.data = [];
					if (tableData.data == null) {
						tableData.data = [];
					}
					for (var i = 0; i < tableData.data.length; i++) {
						tableData.data[i]["_rowstate"] = "update";
						tableData.data[i]["_edit"] = false;
						tableData.data[i]["_selectItemMap"] = selectItemMap;
					}
					this.$nextTick(function() {
						this.data = tableData.data;
						if (tableData["total"] != this.total) {
							this.total = tableData["total"];
						}
						var currentPage = prop["currentPage"];
						if (currentPage != undefined && currentPage != -1 && currentPage != this.currentPage) {
							this.currentPage = currentPage;
						}
					});
					if (tableData.page!=this.currentPage) {
						this.currentPage = tableData.page;
					}
				}
				
			},
			currentPageChange() {
				var data={};
				if(this.sortField!=undefined){
					data[this.componentModel.id+"_sortfield"]=this.sortField;
					data[this.componentModel.id+"_sorttype"]=this.sortType;
				}
				data[this.componentModel.id+"_page"]=this.currentPage;
				sendComponentEventRequest(this, "paginationEvent",data);
			},handleSelectionChange(val) {
				this.multipleSelection = val;
			},getState(){
				var selectedData = this.multipleSelection;
				var ids = "";
				for (var i = 0; i < selectedData.length; i++) {
					if (i > 0) {
						ids += ",";
					}
					ids += selectedData[i]["id"];
				}
				var data={};
				data[this.componentModel.id + "_selectedvalue"]=ids;
				return data;
			},onSortChangeHandler({column, prop, order}){
				console.log(column);
				console.log(prop);
				console.log(order);
				this.sortField=prop;
				this.sortType=order;
				var data={};
				data[this.componentModel.id+"_sortfield"]=prop;
				data[this.componentModel.id+"_sorttype"]=order;
				sendComponentEventRequest(this, "sortEvent",data);
			}
		},
	}
</script>

<style>
	
</style>
